import React, { useState, useRef, useEffect } from "react";
import { Button, Flex, Input } from "antd";
import {
  SearchOutlined,
  MenuOutlined,
  MinusOutlined,
  BorderOutlined,
  CloseOutlined,
} from "@ant-design/icons";
import Icon from "../../common/Icon";
import styles from "./index.module.css";

interface Props {
  showText?: boolean;
}

const CustomTitleBar: React.FC<Props> = ({ showText = false }) => {
  const [progress, setProgress] = useState(100);
  const progressBarRef = useRef<HTMLDivElement>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [blur, setBlur] = useState(false);
  useEffect(() => {
    const onBlur = () => setBlur(true);
    const onFocus = () => setBlur(false);
    window.addEventListener('blur', onBlur);
    window.addEventListener('focus', onFocus);
    return () => {
      window.removeEventListener('blur', onBlur);
      window.removeEventListener('focus', onFocus);
    };
  }, []);
  const handleMinimize = () => {
    window.ipcRenderer.send("window-minimize");
  };

  const handleMaximize = () => {
    window.ipcRenderer.send("window-maximize");
  };

  const handleClose = () => {
    window.ipcRenderer.send("window-close");
  };

  const handleMouseDown = (e: React.MouseEvent) => {
    if (progressBarRef.current) {
      setIsDragging(true);
      updateProgress(e);
    }
  };

  const handleMouseMove = (e: React.MouseEvent) => {
    if (isDragging) {
      updateProgress(e);
    }
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  const updateProgress = (e: React.MouseEvent) => {
    if (progressBarRef.current) {
      const rect = progressBarRef.current.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const newProgress = Math.min(100, Math.max(0, (x / rect.width) * 100));
      setProgress(newProgress);
    }
  };

  useEffect(() => {
    if (isDragging) {
      window.addEventListener("mousemove", handleMouseMove as any);
      window.addEventListener("mouseup", handleMouseUp);
      return () => {
        window.removeEventListener("mousemove", handleMouseMove as any);
        window.removeEventListener("mouseup", handleMouseUp);
      };
    }
  }, [isDragging]);

  return (
    <Flex className={` ${blur ? styles.blur1 : styles.titleBar }`}>
      <div className={styles.mainContent}>
      
        {/* 播放控制区域 */}
        <div className={styles.playControls}>
          <Icon src="/images/快退.png" style={{ width: 24, height: 24 }} />
          <Icon src="/images/播放.png" style={{ width: 24, height: 24 }} />
          <Icon src="/images/快进.png" style={{ width: 24, height: 24 }} />
          <div
            className={styles.progressBar}
            ref={progressBarRef}
            onMouseDown={handleMouseDown}
          >
            <div
              className={styles.progressTrack}
              style={{ width: `${progress}%` }}
            />
            <div
              className={styles.progressHandle}
              style={{ right: `${100 - progress}%` }}
            />
          </div>
        </div>

        {/* Apple Logo */}
        <div className={styles.logo}>
          {showText ? (
            <>
              <Flex
                justify="center"
                align="center"
                className={styles.closeIcon}
              >
                <CloseOutlined style={{ fontSize: 12 }} />
              </Flex>
              <span className={styles.visitingText}>
                 Accessing iTunes Store...
              </span>
              <div className={styles.processBar}></div>
            </>
          ) : (
            <Icon
              src="/images/apple_logo.png"
              style={{ width: 30, height: 30 }}
            />
          )}
        </div>

        {/* 右侧工具区 */}
        <div className={styles.rightTools}>
          <Flex className={styles.menuButtonContainer}>
            <Icon
              className={styles.menuButton}
              src="/images/更多.png"
              style={{ width: 12, height: 12 }}
            />
          </Flex>
          <Input
            prefix={
              <Icon src="/images/搜索.png" style={{ width: 12, height: 12 }} />
            }
            placeholder="Search"
            className={styles.searchInput}
          />
        </div>
      </div>
      {/* 窗口控制按钮 */}
      <Flex className={styles.windowControls} gap={3}>
        <Button
          type="text"
          icon={<MinusOutlined />}
          onClick={handleMinimize}
          className={styles.windowButton}
        />
        <Button
          type="text"
          icon={<BorderOutlined />}
          onClick={handleMaximize}
          className={styles.windowButton}
        />
        <Button
          type="text"
          icon={<CloseOutlined />}
          onClick={handleClose}
          className={`${styles.windowButton} ${styles.closeButton}`}
        />
      </Flex>
    </Flex>
  );
};

export default CustomTitleBar;
